<!-- 

CHECK OUT THOSE:

    cool navigation box ala ipod:
        http://www.barandis.com/dev/jquery/ddmenu/examples.html

    better tree:
        http://www.jstree.com/documentation
    
    THE grid:
        http://www.trirand.com/blog/jqgrid/jqgrid.html#
    
    The FAST grid:
        https://github.com/mleibman/SlickGrid/wiki/Examples
        
 -->
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>Blog</title>
        <link type="text/css" href="/static/css/ui-darkness/jquery-ui-1.8.6.custom.css" rel="stylesheet" />	

        <style type="text/css">
        html, body {
            background:	#666;
            width:		100%;
            height:		100%;
            padding:	0;
            margin:		0;
            overflow:	auto; /* when page gets too small */
        }
        #container {
            background:	#999;
            height:		100%;
            margin:		0 auto;
            width:		100%;
            //max-width:	900px;
            min-width:	700px;
            _width:		700px; /* min-width for IE6 */
        }
        .pane {
            display:	none; /* will appear when layout inits */
        }
        .ui-layout-pane-south {
            overflow: visible !important;
        }
        </style>

<!-- 
  <style type="text/css">
    #droppableCenter {
      height:90%;
      padding:0.5em;
      width:90%;
    }
    #droppableCenter.drophover {
      border: 5px solid green;
    }
  </style>
 -->

        <!--
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        -->
        <script type="text/javascript" src="/static/js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="/static/js/jquery-ui-1.8.6.custom.min.js"></script>
        <script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
        <script type="text/javascript" src="/static/js/jquery.layout-1.2.0.js"></script>

        <link href="/static/css/dynatreeskin/ui.dynatree.css" rel="stylesheet" type="text/css" >
        <script src='/static/js/jquery.dynatree.js' type="text/javascript"></script>

        <script src="/static/js/jquery.contextMenu.js" type="text/javascript"></script>
        <link href="/static/css/jquery.contextMenu.css" rel="stylesheet" type="text/css" >


        <script type="text/javascript" charset="utf-8">

// --- Contextmenu helper --------------------------------------------------

function bindContextMenu() {
    // Add context menu to all nodes:
    $(".dynatree-node")
        .destroyContextMenu() // unbind first, to prevent duplicates
        .contextMenu({menu: "myMenu"}, function(action, el, pos) {
        // The event was bound to the <span> tag, but the node object
        // is stored in the parent <li> tag
        var node = el.parent().attr("dtnode");
        switch( action ) {
        case "cut":
        case "copy":
        case "paste":
            copyPaste(action, node);
            break;
        default:
            alert("Todo: appply action '" + action + "' to node " + node);
        }
    });
};



// var menu1 = [
//   {'Option 1':function(menuItem,menu) { alert("You clicked Option 1!"); } },
//   $.contextMenu.separator,
//   {'Option 2':function(menuItem,menu) { alert("You clicked Option 2!"); } }
// ];
            $(document).ready(function() {
                // Layout
                $('#container').layout(
                    {
                    applyDefaultStyles: true,
                    west__onresize: function () {
                            $('#postlist').accordion('resize')
                        }
                    }
                );

//   $('#popupTest').contextMenu(menu1,{theme:'vista'});
//   $('.treePopupMenu').contextMenu(menu1,{theme:'vista'});
//   $('.dynatree-title').contextMenu(menu1,{theme:'vista'});
//
//                 $('span treePopupMenu a').contextMenu(
//                     function() {
//                         var d = new Date();
//                         var o1 = {}; o1[d.toString()]=function(){};
//                         d.setDate(d.getDate()+1);
//                         var o2 = {}; o1[d.toString()]=function(){};
//                         d.setDate(d.getDate()+1);
//                         var o3 = {}; o1[d.toString()]=function(){};
//                         return [ o1,o2,o3 ];
//                     }
//                 );
  
                // Attach the dynatree widget to an existing <div id="tree"> element
                // and pass the tree options as an argument to the dynatree() function:
                $("#tree").dynatree({
                    imagePath: "/static/css/dynatreeskin",
                    fx: { height: "toggle", duration: 100 },
                    onLazyRead: function(node){
                                node.appendAjax({url: "/the_crypt/json_lazy_tree",
                                           data: {
                                                "model": node.data.model,
                                                "pk": node.data.pk,
                                                "mode": "all"
                                           },
                                           success: function(node) {
                                               // Called after nodes have been created and the waiting icon was removed.
                                               // 'this' is the options for this Ajax request
//                                $('popupTest').contextMenu(menu1,{theme:'vista'});
//                                /*
//                                for c in node.chidList:
//                                    menu = c.span.childNodes[2].childNodes[0]
//                                    menu.contextMenu(menu1,{theme:'vista'});
//                                */
//                                for(var i=0; i<node.childList.length; i++) {
//                                    var popup = node.childList[i].span.childNodes[2].childNodes[0];
//                                    $(popup).addClass('treePopupMenu')
//                                    $(popup).contextMenu(menu1,{theme:'vista'});
//                                    logMsg("##### Child %o", popup);
//                                }
                                           },
                                           error: function(node, XMLHttpRequest, textStatus, errorThrown) {
                                               // Called on error, after error icon was created.
                                               alert("lazy error on" + node.data.title);
                                           },
                                           cache: false // Append random '_' argument to url to prevent caching.
                                          });
                                bindContextMenu();
                    },
//                     dnd: {
//                         onDragStart: function(node) {
//                             /** This function MUST be defined to enable dragging for the tree.
//                              *  Return false to cancel dragging of node.
//                             */
//                             
//                             logMsg("DEE tree.onDragStart(%o)", node);
//                             if(node.data.isFolder)
//                                 return false;
//                             return true;
//                         },
//                         onDragStop: function(node) {
//                             logMsg("DEE tree.onDragStop(%o)", node);
//                         }
//                     },
                    onActivate: function(node) {
                        logMsg("DEE tree.onActivate(%o)", node);
                        // Use our custom attribute to load the new target content:
                        if( node.data.url )
                            $("[name=contentFrame]").attr("src", node.data.url);
                    },
                    onClick: function(node, event) {
                        // Eat mouse events, while a menu is open
                        if( $(".contextMenu:visible").length > 0 ){
                            return false;
                        }
                        logMsg("DEE tree.onClick(%o)", node);
                    },
//                     onKeydown: function(node, event) {
//                         // Eat keyboard events, when a menu is open
//                         if( $(".contextMenu:visible").length > 0 )
//                             return false;
//                         logMsg("DEE tree.onKeyDown(%o, %o)", node, event);
//         
//                         switch( event.which ) {
//         
//                         // Open context menu on [Space] key (simulate right click)
//                         case 32: // [Space]
//                             logMsg("    SPACE");
//                             $(node.span).trigger("mousedown", {
//                                 preventDefault: true,
//                                 button: 2
//                                 })
//                             .trigger("mouseup", {
//                                 preventDefault: true,
//                                 pageX: node.span.offsetLeft,
//                                 pageY: node.span.offsetTop,
//                                 button: 2
//                                 });
//                             return false;
//         
//                         // Handle Ctrl-C, -X and -V
//                         case 67:
//                             if( event.ctrlKey ) { // Ctrl-C
//                                 copyPaste("copy", node);
//                                 return false;
//                             }
//                             break;
//                         case 86:
//                             if( event.ctrlKey ) { // Ctrl-V
//                                 copyPaste("paste", node);
//                                 return false;
//                             }
//                             break;
//                         case 88:
//                             if( event.ctrlKey ) { // Ctrl-X
//                                 copyPaste("cut", node);
//                                 return false;
//                             }
//                             break;
//                         }
//                     },
                    persist: false,
                    children: [
                        // Pass an array of nodes.
                        {title: "Projects", isFolder: true, isLazy: true, key:"", model:"_ROOT_PROJECTS_"},
                    ],
                });
                // Add context menu handler to tree nodes
                bindContextMenu();

//                 $("#droppableCenter").droppable({
//                     hoverClass: "drophover",
//                     addClasses: true,
//                     over: function(event, ui) {
//                         logMsg("droppable.over, %o, %o", event, ui);
//                     },
//                     drop: function(event, ui) {
//                         var source = ui.helper.data("dtSourceNode") || ui.draggable;
//                         $(this).addClass("ui-state-highlight").find("p").html("Dropped " + source);
// //                      alert("dropped");
//                     }
//                 });
                
            });
        </script>
    </head>
    <body>

        <DIV id="container">
        
        
            <DIV class="pane ui-layout-west">
                <div id="tree"> </div>
            </DIV>
        
            
            <DIV class="pane ui-layout-north">
                {% if MGL %}
                <img
                    title="MGL - Logo" 
                    src="http://intranet/mgl/images/news.jpg"
                    alt="MGL - Logo" 
                    width="64" height="64"
                >
                <font color="#FF8B00">MGL</font>
                {% else %}
                <img
                    title="SupamonkS - Logo" 
                    src="http://medias.3dvf.com/publish/supamonks_lapins_cretins/logo_ARCUEIL_SEUL.PNG"
                    alt="SupamonkS - Logo" 
                    width="64" height="64"
                >
                <font color="#9F2427">SPMKS</font>
                {% endif %}
            </DIV>
            
            <DIV class="pane ui-layout-south">
                South
            </DIV>
            
            
            <DIV class="pane ui-layout-east">
                <div id=popupTest>
                    POPUP
                </div>
                <div class=treePopupMenu>
                    POPUP
                </div>
            </DIV>
            
            
            <DIV class="pane ui-layout-center">
                <iframe src="welcome" name="contentFrame"
                    width="100%" height="100%"
                    scrolling="yes" marginheight="0" marginwidth="0" frameborder="0">
                  <p>Your browser does not support iframes</p>
                </iframe>
<!-- 
                  <div id="droppableCenter" class="ui-widget-content">
                    <p>Drop here from the project tree.</p>
                  </div>
 -->
            </DIV>
        
        
        </DIV>

                <!-- Definition of context menu -->
                <ul id="myMenu" class="contextMenu">
                    <li class="edit"><a href="#edit">Edit</a></li>
                    <li class="cut separator"><a href="#cut">Cut</a></li>
                    <li class="copy"><a href="#copy">Copy</a></li>
                    <li class="paste"><a href="#paste">Paste</a></li>
                    <li class="delete"><a href="#delete">Delete</a></li>
                    <li class="quit separator"><a href="#quit">Quit</a></li>
                </ul>

    </body>
</html>
